<template>
	<view class="xmg-player"><video class="live-box" :id="`live${liveId}`" :src="liveUrl" x5-video-player-type="h5-page"
			:webkit-playsinline="true"></video></view>
</template>

<script>
	// tcplayer
	export default {
		data() {
			return {};
		},
		name: 'xmg-player',
		props: {
			// 直播源地址
			liveUrl: {
				type: String,
				default: ''
			},
			// 直播id
			liveId: {
				type: [Number, String],
				default: ''
			}
		},
		mounted() {
			console.log('live' + this.liveId);
			setTimeout(() => {
				// 是否有引入了tcplayer插件
				if (window.tcplayer) {
					var player = new TcPlayer('live' + this.liveId, {
						m3u8: this.liveUrl, //请替换成实际可用的播放地址
						autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
						poster: 'http://www.test.com/myimage.jpg',
						width: '100%', //视频的显示宽度，请尽量使用视频分辨率宽度
						height: '100%' //视频的显示高度，请尽量使用视频分辨率高度
					});
				} else {}
			}, 300);
		},
		methods: {}
	};
</script>

<style lang="scss">
	.xmg-player {
		height: 100%;
		width: 100%;
		.live-box {
			height: 100%;
			width: 100%;
			z-index: -1;
		}
	}
</style>
